<template>
    <div class="table">
        <!-- title -->
         <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i>&nbsp;商品分类</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 表格主体 -->
        <div class="container">
            <!--内容-->
            <el-tabs v-model="message"   @tab-click="handleClick">
                <el-tab-pane label="商品一级分类" name="first">
                    <div style="height:30px;"></div>
                    <el-button type="primary" @click="addClassifyFather"><i class="el-icon-circle-plus el-icon--left"></i>新增一级分类</el-button>
                </el-tab-pane>
                <el-tab-pane label="商品二级分类" name="second">
                    <div style="height:30px;"></div>
                    <el-button type="primary" @click="addClassifyChild"><i class="el-icon-circle-plus el-icon--left"></i>新增二级分类</el-button>
                </el-tab-pane>
            </el-tabs>
            <!--/内容-->
            <!-- title -->
            <div style="height:30px;"></div>
            <!-- 表格主体 -->
            <el-table :data="tableData" border style="width: 100%" >
                <el-table-column prop="id" :label="tabLabel1"  align="center" ></el-table-column>            
                <el-table-column prop="name" :label="tabLabel2"  align="center">
                    
                </el-table-column>            
                <el-table-column label="操作"  align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button class="del" size="small" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="height:200px;"></div>
            <!-- 分页按钮 -->
            <div class="pagination" v-show="totalPages>10">
                <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total="totalPages">
                </el-pagination>
            </div>
        </div>
        <!-- 新增弹出框 -->
        <el-dialog  :title="dialogVisibleText"  :visible.sync="dialogVisible"  width="600px">
            <div style="padding:50px 0px">
                <el-form ref="form" :model="form" label-width="120px">
                    <el-form-item :label="tabLabel2" v-show="showPrentSelect">
                        <el-select v-model="optionsValue" placeholder="请选择所属分类" @change="changeFromSelect">
                            <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="tabLabel2" >
                    <el-input v-model="form.name" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addClassify">确 定</el-button>
            </span>
            </el-dialog>
         <!-- 新增弹出框 -->
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
         <!-- 编辑弹出框 -->
    </div>    
</template>
<script>
export default {
    name:"goodsClassify",
    data(){
        return{
            message: 'first',
            showHeader: false,
            pageIndex:1,//当前页码
            pageSize:10,//每页10条
            totalPages:1,//默认的总条数
            tableData:[],//表格数据
            propData:[], //保留一级数据
            propSubData:[],//保留二级数据
            index:'',//当前下标
            idxId:'',// 当前ID  用于编辑或者删除
            delVisible:false, //删除确认提示，默认隐藏
            editVisible:false, //编辑确认框。默认隐藏
            dialogVisibleText:"新增分类",
            dialogVisible:false, //新增
            showPrentSelect:false,
            type:1,//一级分类 2 二级分类
            tabLabel1:"一级分类Id",
            tabLabel2:"一级分类名称",
            options:[], //新增分类  一级分类下拉
            optionsValue:'',//分类的值
            form:{
                id:'',
                name:''
            }
        }
    },
    mounted(){
        this. getListData();
    },
    methods:{
        //获取分类信息
        getListData(){
            var _this =this;
            this.$axios.get('/manage/goods/categoryList', {
                params: {
                    pageIndex:this.pageIndex,
                    pageSize:9999
                }
            })
            .then(function (response) {
                // console.log(response);
                if(response.data.code==200){
                    var data = response.data.data;
                    if(data.length>0){
                        var araay1 =[];
                        var araay2=[];
                        data.forEach(element => {
                            var obj = {};
                            obj.id = element.id;
                            obj.name = element.name;
                            araay1.push(obj);
                            element.children.forEach((row)=>{
                                var subObj ={};
                                subObj.pid = element.id;
                                subObj.pName = element.name;
                                subObj.id = row.id;
                                subObj.name = row.name;
                                araay2.push(subObj);
                            })
                        });
                        _this.propSubData = araay2;
                        _this.propData = araay1;
                        _this.options =araay1;
                        if(_this.type==2){
                            //二级分类
                            _this.tableData =araay2;
                        }else{
                            //一级分类
                            _this.tableData =araay1;
                        }                        
                        // console.log(_this.options);
                    }
                }
                else{
                    console.log("获取分类失败");
                    _this.$notify.error({
                        title: '获取分类列表失败',
                        message: response.data.msg
                    });
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        },
        //切换分类展示
        handleClick(tab, event){
            if(this.message=="first"){
                this.type=1; //类型：1一级分类，2二级分类
                this.optionsValue="";
                this.tableData = this.propData;
                this.tabLabel1 ="一级分类Id";
                this.tabLabel2 ="一级分类名称";
            }else{
                this.type=2;
                //重新加载二级分类
                this.tableData = this.propSubData;
                this.tabLabel1 ="二级分类Id";
                this.tabLabel2 ="二级分类名称";
            }
        },
        //新增分类   选择一级分类并记录一级分类的Id
        changeFromSelect(value){
            // console.log("一级分类选中的值"+value);
        },
        //新增分类一级
        addClassifyFather(){
            //显示新增
            this.dialogVisibleText ="新增分类";
            this.dialogVisible= true;
            this.showPrentSelect = false;
            this.optionsValue=""; //
        },
        //新增分类二级
        addClassifyChild(){
            this.dialogVisibleText ="新增分类";
            this.optionsValue = "";//之前选中的二级分类清除
            this.dialogVisible= true;
            this.showPrentSelect = true;
            this.form.name =""; //可能来自编辑二级分类的名称遗留
        },
        //新增、编辑保存
        addClassify(){
            var _this = this;
            if(this.form.name==""){
                this.$notify.info({title: '提示',message: '请填写分类名称'});
                return false;
            }else if( this.optionsValue=="" && this.type==2){
                //新增二级分类  判断是否选择了一级分类的值
                this.$notify.info({title: '提示',message: '请选择一级分类'});
                return false;
            }else{
                if(this.dialogVisibleText!="编辑分类"){
                    //提交新增分类
                    const querystring = require('querystring');
                    const param ={};
                    param.pid = 0;
                    if(this.optionsValue!=""){
                        param.pid=parseInt(this.optionsValue);
                    }
                    param.name=this.form.name;

                    this.$axios.post('/manage/goods/addCategory',querystring.stringify(param)).then(response=>{
                        // console.log(response);
                        if(response.data.code==200){
                            _this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            //重新获取数据
                            _this.getListData();
                            
                        }else{
                            _this.$notify.error({
                                title: '添加失败',
                                duration:2000,
                                message: '失败原因：'+response.data.msg
                            });
                        }
                        //隐藏新增框
                        _this.dialogVisible= false;

                    }).catch(error=>{
                        console.log(error);
                    });
                }
                else{
                    //提交编辑
                    const querystring = require('querystring');
                    const param ={};
                    if(this.type==1){
                        param.pid=0;
                    }else{
                        param.pid=parseInt(this.optionsValue);
                    }
                    param.id=parseInt(this.form.id);
                    param.name=this.form.name;
                    // console.log(param);
                    this.$axios.post('/manage/goods/modifyCategory',querystring.stringify(param)).then(response=>{
                        // console.log(response);
                        if(response.data.code==200){
                            _this.$message({
                                message: '编辑成功',
                                type: 'success'
                            });
                            //重新获取数据
                            _this.getListData();
                            
                        }else{
                            _this.$notify.error({
                                title: '编辑失败',
                                duration:2000,
                                message: '失败原因：'+response.data.msg
                            });
                        }
                        //隐藏新增框
                        _this.dialogVisible= false;

                    }).catch(error=>{
                        console.log(error);
                    });

                }
                
            }
        },
         // 分页导航
        handleCurrentChange (val){
            // this.cur_page = val;
            //     this.getData();
        },
        //编辑二级分类
        handleEdit(index,row){
            if(row.id &&row.id>0){
                this.dialogVisibleText ="编辑分类";
                this.index = index;  //分类下边
                this.idxId = row.id;  //分类ID
                this.dialogVisible = true; //显示编辑
                this.form.name = row.name;//保存当前分类名称
                this.form.id = row.id; //保存当前Id
                if(this.type==1){
                   this.showPrentSelect = false; //隐藏一级
                }else{
                    //表示是二级分类
                    this.showPrentSelect = true; //显示一级选择
                }
            }
        },
        //删除二级分类
        handleDelete(index,row){
            var _this = this;
            if(row.id &&row.id>0){
                this.form.id =row.id;
                const querystring = require('querystring');
                const param ={};
                param.id=parseInt(this.form.id);
                this.$axios.post('/manage/goods/deleteCategory',querystring.stringify(param)).then(response=>{
                    // console.log(response);
                    if(response.data.code==200){
                        _this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        //重新获取数据
                        _this.getListData();
                        
                    }else{
                        _this.$notify.error({
                            title: '删除失败',
                            duration:2000,
                            message: '失败原因：'+response.data.msg
                        });
                    }
                    //隐藏新增框
                    _this.dialogVisible= false;

                }).catch(error=>{
                    console.log(error);
                });
            }
        },
        //确认编辑保存
        saveEdit(){

        },
        //确定删除
        deleteRow(){

        }
    }  
}
</script>
<style lang="stylus" scoped>
    .handle-box{
        margin-bottom :20px;
        .handle-box-1{
            margin-bottom :15px;
            .handle-input {
                width: 250px;
                display: inline-block;
                margin-right :30px;
            }
            .handle-date{
                margin-right :30px;
            }
        }
        .handle-box-2{
            .handle-select{
                width :135px;
                margin-right :30px;
            }
        }
       
    }
    .edit{
        color #ff9800;
    }
    .del{
        color #e51c23;
    }
</style>
